<template>
  <div class="dashboard-container">
    <div v-if='now_time.getHours() > 6 && now_time.getHours() < 11' class="dashboard-text one">早上好：{{userInfo.realname}}</div>
    <div v-else-if='now_time.getHours() > 11 && now_time.getHours() < 14' class="dashboard-text two">中午好：{{userInfo.realname}}</div>
    <div v-else-if='now_time.getHours() > 14 && now_time.getHours() < 18' class="dashboard-text three">下午好：{{userInfo.realname}}</div>
    <div v-else class="dashboard-text four">夜深了，早点休息，{{userInfo.realname}}~</div>
  </div>
</template>

<script>
import axios from '@/http/axios'
export default {
  data(){
    return {
      userInfo:{},
      now_time:''
    }
  },
  created(){
    var token = localStorage.getItem('token')
    this.findUserInfo(token)
    this.now_time = new Date()
  },
  methods:{
    findUserInfo(token){
      var obj = {
        token
      }
      axios({
        url:'http://121.199.29.84:8001/user/info',
        method:'get',
        params:obj
      }).then((res)=>{
        this.userInfo = res.data.data
        // 把用户头像存放到浏览器
        localStorage.setItem('userFace',res.data.data.userFace)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.dashboard-text {
  color:white;
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  font-family: 'HYXinHaiXingKaiW';
}
.one {
  background-image:url('../../assets/1.jpg')
}
.two {
  background-image:url('../../assets/2.jpg')
}
.three {
  background-image:url('../../assets/3.jpg')
}
.four {
  background-image:url('../../assets/4.jpg')
}
</style>
